this.ws=this.ws||{};
(function(){
    var HScrollBar=function($dom)
    {
        this.init($dom);
    }

    var p=HScrollBar.prototype;
    p.isDown=false;
    p.mouseDownX=0;
    p.downX=0;

    p.init=function($dom)
    {
        this.$dom=$dom;
        this.$bg=this.$dom.children(".bg");
        this.$loadBar=this.$dom.children(".loadBar");
        this.$timeBar=this.$dom.children(".timeBar");
        this.$dragger=this.$dom.children(".dragger");
        //
        var cur=this;
        this.$dragger.mousedown(function(event){
            cur.isDown=true;
            cur.mouseDownX=event.pageX;
            cur.downX=cur.$dragger.position().left;
        });
        $(document).mouseup(function(event){
            cur.isDown=false;
        });
        $(document).mousemove(function(event){
            if(cur.isDown){
                var posX=event.pageX-cur.mouseDownX+cur.downX;
                if(posX<0) posX=0;
                var rightX=cur.$bg.width()-cur.$dragger.width();
                if(posX>rightX) posX=rightX;
                cur.setPosition(posX);
            }
        });
        //
        this.$dom.click(function(e){
            var posX=e.pageX-$(this).offset().left;
            if(posX<0) posX=0;
            var rightX=cur.$bg.width()-cur.$dragger.width();
            if(posX>rightX) posX=rightX;
            cur.setPosition(posX);
        });
    }

    p.setPosition=function(posX)
    {
        this.$dragger.css("left",posX);
        this.$timeBar.width(posX);
        var per=this.$dragger.position().left/(this.$bg.width()-this.$dragger.width());
        $(this).triggerHandler("changePer",per);
    }
    ws.HScrollBar=HScrollBar;
})()

